<template>
	<view class="dataManage">
		<view class="sjrz" style="">
			{{merchantName}}
		</view>
		<view class="title">
			今日数据汇总
		</view>
		<view class="todayInfo">
			<view class="item" v-for="(i,index) in todayList" @click="goAccess(i)">
				<view class="">
					<image :src="i.img" mode="heightFix" style="width: 40rpx;height: 40rpx;"></image>
				</view>
				<view class="topName">
					{{i.name}}
				</view>
				<view class="sum" :style="{color:i.color}">
					<text class="dolar" v-if="i.dolar">￥</text>{{i.num}}
				</view>
			</view>
		</view>
		<view class="title2">
			<text>数据分析</text>
			<view class="">
				<view class="selectTop">
					<view class="item">
						<vvSelect :placeholder="name" class="select" :list="city_list" label="name" valueKey="type_id"
							ref="vvSelect1" @change="pickerChange"></vvSelect>
						<view class="arrow">
							<u-icon name="arrow-down" color="#081738;" size="16">
							</u-icon>
							<!-- <u-icon name="close-circle" color="#081738;" size="16" v-else @click="closeSel1">
							</u-icon> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="echarts">
			<view class="tips">
				<text>数据趋势</text>
			</view>
			<view class="tips">
				总交易数量{{num||0}}
			</view>
			<l-echart ref="chart" @finished="init"></l-echart>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import {
		census,
		orderChart
	} from '@/request/api.js'
	import vvSelect from '@/components/vv-select/vv-select.vue'
	export default {
		components: {
			vvSelect,
		},
		data() {
			return {
				merchantName:uni.getStorageSync('userInfo').merchant.name,
				num:0,
				name: '近30天',
				form: {
					type: '0'
				},
				city_list: [{
					type_id: '0',
					name: '近30天'
				}, {
					type_id: '1',
					name: '本月'
				}, {
					type_id: '2',
					name: '本季度'
				}, {
					type_id: '3',
					name: '本年'
				}],
				todayList: [{
					name: '今日订单',
					num: '0',
					img: '../../../static/dataImg/1.png',
					color: '#2CB9A4'
				}, {
					name: '今日营业额',
					num: '0',
					dolar: true,
					img: '../../../static/dataImg/2.png',
					color: '#2CB9A4'
				}, {
					name: '今日收益',
					num: '0',
					dolar: true,
					img: '../../../static/dataImg/3.png',
					color: '#2CB9A4'
				}, {
					name: '今日访问数',
					num: '0',
					img: '../../../static/dataImg/4.png',
					color: '#2CB9A4'
				}, {
					name: '今日新增用户',
					num: '0',
					img: '../../../static/dataImg/5.png',
					color: '#2CB9A4'
				}, {
					name: '今日推广数',
					num: '0',
					img: '../../../static/dataImg/6.png',
					color: '#2CB9A4'
				}],
				option: {
					grid: { // 让图表占满容器
						top: "20px",
						left: "60px",
						right: "60px",
						bottom: "20px"
					},
					toolbox: {
						show: false,
					},
					calculable: true,
					tooltip: {
						trigger: 'axis',
						formatter: ""
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						"axisTick": { //x轴刻度线
							"show": false
						},
						data: [],
						axisLine: {
							show: false
						},
					}],
					yAxis: [{
						type: 'value',
						minInterval: 1,
						axisLine: {
							onZero: false,
							show: false
						},
						axisLabel: {
							formatter: '{value}'
						},
						"axisTick": { //x轴刻度线
							"show": false
						},
						boundaryGap: false,
					}],
					series: [{
						name: '',
						// symbol: 'none',
						type: 'line',
						color: ['#2CB9A4'],
						smooth: true,
						itemStyle: {
							normal: {
								lineStyle: {
									shadowColor: 'rgba(0,0,0,0.4)'
								}
							}
						},
						data: []
					}]
				},
			}
		},
		mounted() {
			// init(echarts, theme?:string, opts?:{}, chart => {})
			// echarts 必填， 非nvue必填，nvue不用填
			// theme 可选，应用的主题，目前只支持名称，如：'dark'
			// opts = { // 可选
			//	locale?: string  // 从 `5.0.0` 开始支持
			// }
			// chart => {} ， callback 返回图表实例

		},
		onLoad() {
			this.census()
			this.orderChart()
		},

		methods: {
			closeSel1() {
				// this.form.type = '0'
				// this.$refs.vvSelect1.emptCheckLabels()
				// this.orderChart()
			},
			async orderChart() {
				let res = await orderChart(this.form)
				console.log(res)
				let arr1 = []
				let arr2 = []
				res.data.cart.map(item => {
					arr1.push(item.num)
					arr2.push(item.title)
				})
				this.option.xAxis[0].data = arr2
				this.option.series[0].data = arr1
				this.option.yAxis[0].axisLine.show = arr1.length == 0 ? false : true;
				this.option.xAxis[0].axisLine.show = arr1.length == 0 ? false : true;
				this.num = res.data.num
				// console.log(this.option)
				// console.log(arr1,arr2)
				this.$refs.chart.init(echarts, chart => {
					// console.log(this.option)
					chart.setOption(this.option);
				});
			},
			pickerChange(e, name) {
				this.form.type = e
				this.name = name;
				// console.log(e, name)
				this.orderChart()
			},
			async census() {
				let res = await census()
				this.todayList[0].num = res.data.today_order
				this.todayList[1].num = res.data.today_turnover
				this.todayList[2].num = res.data.today_income
				this.todayList[3].num = res.data.access_num
				this.todayList[4].num = res.data.today_member
				this.todayList[5].num = res.data.today_promotion
				// console.log(res,1111)
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .select {
		color: #545454 !important;
	}

	.dataManage {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		font-size: 28rpx;

		.selectTop {
			width: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 15rpx 0;
			// margin-left: -20rpx;
			// margin-right: -20rpx;
			// padding: 20rpx 40rpx;
			// background: #fff;
			// border-bottom: 1px solid #E2E2E2;
			color: #081738;
			font-size: 28rpx;
			position: relative;

			.item {
				display: flex;
				width: 100%;
				// background: rgba(255, 255, 255, 0.5);
				border-radius: 60px;
				padding: 15rpx;

				.select {
					flex: 1;
					color: #BABABA;
				}

				.arrow {
					width: 20rpx;
					height: 20rpx;
					margin-right: 8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.echarts {
			display: flex;
			flex-direction: column;
			color: #545454;
			background: #FFFFFF;
			box-shadow: 0px 0px 5px rgba(8, 23, 56, 0.05);
			border-radius: 5px;
			font-size: 28rpx;
			padding: 20rpx;

			.tips {
				margin-top: 20rpx;

				text {
					border-bottom: 1px solid #2B69D1;
					color: #2CB9A4;
					padding-bottom: 3px;
				}
			}
		}

		.sjrz {
			text-align: left;
			box-shadow: 0px 0px 5px rgba(151, 151, 151, 0.1);
			box-sizing: border-box;
			border-radius: 5px;
			width: 100%;
			padding: 20rpx;
			background: #fff;
			color: #545454;
		}

		.title {
			display: inline-block;
			height: 30px;
			line-height: 30px;
			box-sizing: border-box;
			overflow: auto;
			color: #545454;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			background-image: url('../../../static/dataImg/titleBg.png');
			background-size: 99% 89%;
			background-repeat: no-repeat;
			background-position: 0 6rpx;
			padding-left: 50rpx;
			padding-bottom: 4rpx;

			.day {
				color: #979797;
			}
		}

		.title2 {
			color: #545454;
			// font-weight: 600;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-image: url('../../../static/dataImg/titleBg.png');
			background-size: 100% 61%;
			background-repeat: no-repeat;
			background-position: 0 27rpx;
			padding-left: 50rpx;
			margin-bottom: 20rpx;

			.day {
				color: #979797;
			}
		}

		.todayInfo {
			display: flex;
			border-radius: 8px;
			padding: 20rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 5px rgba(8, 23, 56, 0.05);
			margin: 20rpx 0;
			flex-wrap: wrap;
			margin-top: 0;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 33.33%;
				margin-top: 20rpx;

				.topName {
					color: #1D1B20;
					margin: 2rpx;
					font-size: 28rpx;
				}

				.sum {
					color: #2CB9A4;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>